<template>
  <el-table-column
    :key="code"
    :label="name"
    :min-width="200"
    :fixed="false"
    align="center"
  >
    <template
      slot-scope="scope"
    >
      <!-- 编辑模式 -->
      <ik-table-image-oss
        v-if="edit"
        :ref="'input_' + scope.$index + '_' + 'code'"
        v-model="scope.row[code]"
        :line="scope.$index"
        :code="code"
        :name="name"
        :default-value="defaultValue"
        :min-length="minLength"
        :max-length="maxLength"
        :require="getRequire"
        @onFieldChange="onFieldChange"
      />
      <!-- 显示模式   -->
      <ik-table-image-oss-tag
        v-else
        :code="code"
        :name="name"
        :default-value="defaultValue"
        :value="scope.row[code]"
      />
    </template>
  </el-table-column>
</template>

<script>
import IkTableImageOss from '@/components/ik/table/input/IkTableImageOss'
import IkTableImageOssTag from '@/components/ik/table/input/IkTableImageOssTag'
export default {
  name: 'IkColumnImageOss',
  components: {
    IkTableImageOss,
    IkTableImageOssTag
  },
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    minLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return [
        ]
      }
    }
  },
  data() {
    return {
      val: '',
      errorSign: [],
      message: []
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '') {
          this.val = value
        } else {
          this.val = this.defaultValue
          this.$emit('input', value)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  methods: {
    onFieldChange() {
      this.$emit('onFieldChange', this.line, this.code)
    },
    input(value) {
      // 取值验证
      // v-model实现触发方法
      this.$emit('input', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.value = this.defaultValue
    },
    clean() {
      this.value = ''
    }
  }
}
</script>
<style scoped>
::v-deep.require> .el-input__inner{
  border: red 1px solid;
}
</style>
<style lang="scss" >
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
